import React from 'react'
import { connect } from 'dva'
import { Form ,Modal,message,Upload,Button} from 'antd'
import { hashHistory } from 'dva/router'
import { mapStateToProps } from 'utils/view_utils'
import styles from './soilFilmMarketStyle.less'
import ListPage from 'widget/PageTmpl/ListPageQiance'
import classnames from 'classnames/bind';
import FlagBtn from 'widget/FlagBtn/FlagView'
import config from 'config/config'
const confirm = Modal.confirm;
import $ from 'jquery'
let cx=classnames.bind(styles);


const soilFilmMarketView = function({dispatch, model, form}) {
  // 表单的子函数
  // const {resetFields, getFieldDecorator, validateFields, setFieldsValue} = form
  // 取出model对象，命名空间
  const { modelObj, namespace } = model
  // modelObj.xxx获取model中状态机的值
  let {areaList,biz,projectList} = modelObj

  let pageProps = {
    // ---------- 界面部分 ----------
    ui: {
      // 页面接口地址
      api_url: `${config.aheadPlan}admin/landAuction/landAuction/list`,
      // 接口方式
      method: "GET",
      // "data_field_name":"data",
      app: "",
      // 接口参数
      params: {
        pageSize:10,
        pageNo:1,
        },
        
      // 模拟数据 - 用于开发需要，若填充了上面的api_url之后，请将此项设置为null
      // "mockData": mockData,
      mockData: null,
      // 查询栏
      search_bar: {
        fields: [
          {
            en_name: "auctionTime",
            zh_name: "拍卖时间",
            elem_type: "Date",
            format: "YYYY-MM-DD",
            query_format: "YYYY-MM-DD",   // 请求参数, 当请求参数和显示时格式不同可通过该参数区分
            // double: true,  // 日期范围组件 使用"YYYY-MM-DD HH:mm:ss"格式时, 显示不全时可使用该参数, 将占据两格位置
            split_keys: ['startTime', 'endTime'],
            elem_valid_type: "string"
          },
          {
            en_name: 'areaName',
            zh_name: '城市',
            elem_type: 'SelectFilter',
            elem_valid_type: 'string',
            showSearch: true,
            cmpt_items: areaList,
          },
          {
            en_name: 'brand',
            zh_name: '竞得单位',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
          {
            en_name: 'landUse',
            zh_name: '土地用途',
            elem_type: 'SelectFilter',
            elem_valid_type: 'string',
            showSearch: true,
            cmpt_items: [
              {
                value: '住宅用地',
                label: '住宅用地'
              }, 
              {
                value: '商业用地',
                label: '商业用地'
              },
              {
                value: '综合用地',
                label: '综合用地'
              },
            ],
          },
          {
            en_name: 'premiumRates',
            zh_name: '溢价率(%)',
            elem_type: 'NumberRange',
            elem_valid_type: 'string',
            split_keys: ['premiumRates1', 'premiumRates2'],
          },
          {
            en_name: 'landName',
            zh_name: '地块名称',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },  {
            en_name: 'address',
            zh_name: '地块位置',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
        ],
        searchHandler: () => { // 自定义搜索按钮回调函数，点击搜索时触发
          console.log('search click')
        },
        resetHandler: () => { // 自定义重置按钮回调函数，点击重置时触发
          console.log('reset click')
        },
        searchCallback: params => { // 自定义搜索完成后的后调函数, 搜索完成后触发, 并将本次搜索的参数传入
          console.log('search finish', params)
        },
        pasteTargetList: [  // 列表组件中将输入框的en_name作为默认id(也可以通过id另外设置)
          'channel',  // 将需要粘贴事件拦截的输入框id以数组的形式传入, 该参数对应PasteFromClipboard组件的targetList参数
        ]
      },
      // 数据表格  序号 是否生效 项目名称  佣金方案名称 方案生效日期 方案失效日期 审批人 审批通过日期   提交人 提交日期  创建人 创建日期
      table:
        {
          status_params: "status=0",
          status_text: "全部",
          // 表头字段列表
          scroll: { x: 4000},
          fields: [
            {
              en_name: "auctionTime", width:150,
              zh_name: "拍卖时间",
              sorter: (a, b) => sorterFun(a, b),
            },
            {
                en_name: "areaName",
                zh_name: "城市",
            },
            {
                en_name: "brand",
                zh_name: "竞得单位",
            },
            {
                en_name: "landName",
                zh_name: "土地名称",
            },
            {
                en_name: "address",
                zh_name: "地块位置",
            },
            {
                en_name: "landUse",
                zh_name: "土地用途",
            },
            {
              en_name: "landArea",
              zh_name: "土地面积(m²)",
              sorter: (a, b) => a.landArea - b.landArea,
            },
            {
              en_name: "planArea",
              zh_name: "规划建面(m²)",
              sorter: (a, b) => a.planArea - b.planArea,
            },
            {
              en_name: "plotRatio",
              zh_name: "容积率",
              sorter: (a, b) => a.plotRatio - b.plotRatio,
            },
            {
              en_name: "firstHousePrice",
              zh_name: "起拍楼面价(元/m²)",
              sorter: (a, b) => a.firstHousePrice - b.firstHousePrice,
            },
            {
              en_name: "realHousePrice",
              zh_name: "成交楼面价(元/m²)",
              sorter: (a, b) => a.realHousePrice - b.realHousePrice,
            },
            {
              en_name: "firstTotalPrice",
              zh_name: "起拍总价(万元)",
              sorter: (a, b) => a.firstTotalPrice - b.firstTotalPrice,
            },
            {
              en_name: "realPrice",
              zh_name: "成交总价(万元)",
              sorter: (a, b) => a.realPrice - b.realPrice,
            },
            {
              en_name: "premiumRates",
              zh_name: "溢价率(%)",
              sorter: (a, b) => a.premiumRates - b.premiumRates,
              render: (a, item, index, d, e, f) => {
                return item.premiumRates + '%'
              },
            },
            {
              en_name: "futureEstimatePrice",
              zh_name: "未来预估售价(元/m²)",
              sorter: (a, b) => a.futureEstimatePrice - b.futureEstimatePrice,
            },
            {
              en_name: "averagePrice",
              zh_name: "周边项目售价区间(元/m²)",
            },
            {
              en_name: "remark",zh_name: "补充说明", width:350,
              render: (text, item, index) => {
                  return (text&&<div style={{ maxHeight: '60px', overflowY: 'auto' }} dangerouslySetInnerHTML={{ __html: text }}>
                  </div>)
              }
            },
            {
              en_name: "edit",
              zh_name: "操作",
              width:130,
              fixed:'right',
              render: (a, item, index, d, e, f) => {
                return (
                    <span>
                        <FlagBtn node={<a onClick={() => addOrEditSkip('edit',item)}>编辑<span className="ant-divider" /></a>} btnId={''}> </FlagBtn>
                        <FlagBtn node={<a onClick={() => deleteFun('delete',item)}>删除<span className="ant-divider" /></a>} btnId={''}> </FlagBtn>
                    </span>
                )
              },
            }
          ]
        },
      // 操作栏
      action_bar: [
        {
          label: "模板下载",
          type: "primary",
          onClick: (e,row) =>{
            dispatch({
              type: `${namespace}/getExcel`,
              payload: {}
            })
          }
        },
        {
          label: "导入",
          type: "primary",
          render:(e)=>{
            return <div style={{display:'inline-block',height: '32px',lineHeight: '32px',background: '#0877fd',color: '#fff',borderRadius: '4px',padding: '0 20px',marginRight: '14px',cursor: 'pointer'}} onClick={() => fileClick() }>
                      <span>导入</span>
                      <input type="file" id="file" accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" style={{display: 'none'}}  onChange={(e) => uploadFun(e.target.files,'file') }/>
                    </div>
          },
          onClick: (e,row) =>{
          }
        },
        {
          label: "导出",
          type: "primary",
          onClick: (e,row) =>{
            dispatch({
              type: `${namespace}/exportExcel`,
              payload: {}
            })
          }
        },
        {
          label: "新增",
          type: "primary",
          onClick: (e,row) =>{
            hashHistory.push({
              pathname: '/home/predictManage/soilFilmMarketDetail',
              query: {}
            })
          }
        },
      ]
    },
  }

  function sorterFun(a,b){
    return a.auctionTime < b.auctionTime ? 1 : -1
  }
  // 查看及编辑跳转
  function addOrEditSkip(type,item){
      hashHistory.push({
        pathname: '/home/predictManage/soilFilmMarketDetail',
        query: {actionType: type, id:item.id }
      })
  }
  //禁用启用
  function deleteFun(type,item){
    confirm({
      title: '删除确认',
      content: '您真的要删除此条规则信息吗?',
      okText: '确认',
      okType: 'primary',
      cancelText: '取消',
      onOk() {
        dispatch({
          type: `${namespace}/deleteFun`,
          payload: { id: item.id}
        })
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  function uploadFun(files){
    dispatch({
      type: `${namespace}/upload`,
      payload: { files: files}
    })
  }
  function fileClick(){
    $('#file').click()
  }

  if (!!modelObj.biz) {
		pageProps.biz = modelObj.biz
		pageProps.biz.syncBackCbf = (biz) => {
			dispatch({
				type: `${namespace}/updateStore`,
				payload: { biz }
			})
		}
  }

  return (
    <div className={cx('pageLayout')}>
      <ListPage pageProps={pageProps}/>
    </div>
  )
}
// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(soilFilmMarketView))
